<template>
    <div class="mine-index">
        <header style="width:100%;background:#ffc400;" ref="mindexheader"></header>
        <div class="indexwrapper" ref="indexwrapper">
            <scroll class="mine-wrapper">
                <div>
                    <div class="m-top">
                        <div class="logobox">
                            <div class="avatar default">
                                <div class="avatar-img" v-show="!$store.state.login"></div>
                                <img v-lazy="avatar" alt="" v-show="$store.state.login">
                            </div>
                            <div class="login-n" @click="goLogin" v-show="!$store.state.login">
                                点击登录
                            </div>
                            <div class="login-y" v-show="$store.state.login">
                                <p class="name">{{userInfo.nickname}}</p>
                                <div class="score">
                                    <p class="score-title" style="margin-right:4px;">
                                        <span>积</span>
                                        <span>分</span>
                                    </p>:
                                    <span style="margin-left:4px;color:#00b5bf">{{userInfo.score}}</span>
                                    <div class="sign" @click="sigin">签到</div>
                                </div>
                                <div class="vip">
                                    <p style="margin-right:4px;">
                                        <span>VIP等级</span>
                                    </p>:
                                    <span style="margin-left:4px; color:#00b5bf">VIP{{userInfo.vip}}</span>
                                    <p class="levelup">升级还需:
                                        <span style="color:#00b5bf">{{userInfo.vipNextScore}}积分</span>
                                    </p>
                                </div>
                            </div>
                            <div class="config" @click="goConfigPage"></div>
                        </div>
                        <div class="gamebox" v-show="userInfo.gameList &&userInfo.gameList.length">
                            <div class="mygame-title">
                                <span class="mg-icon"></span> 我的游戏
                            </div>
                            <div class="mg-box" ref="mgBox">
                                <div class="mg-box-wrapper">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                    <img src="../../../common/image/icon.png" alt="" ref="myGame">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mine">
                        <router-link class="m-item" to="/mine/giftpack" tag="div">
                            <span class="gift"></span>
                            <p>我的礼包</p>
                        </router-link>
                        <router-link class="m-item" to="/mine/message" tag="div">
                            <span class="message"></span>
                            <p>我的消息</p>
                        </router-link>
                        <router-link class="m-item" to="/mine/score" tag="div">
                            <span class="score"></span>
                            <p>我的积分</p>
                        </router-link>
                        <router-link class="m-item" to="/mine/accountsafe" tag="div">
                            <span class="accountsafe"></span>
                            <p>账号安全</p>
                        </router-link>
                        <router-link class="m-item" to="/mine/favorite" tag="div">
                            <span class="focus"></span>
                            <p>我的关注</p>
                        </router-link>
                        <router-link class="m-item" to="/mine/privilege" tag="div">
                            <span class="vip"></span>
                            <p>会员特权</p>
                        </router-link>
                        <div class="m-item">
                            <span class="service"></span>
                            <p>我的客服</p>
                        </div>
                    </div>
                </div>

            </scroll>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script type="text/ecmascript-6">
import BSscroll from 'better-scroll';
import Scroll from '@/base/scroll/scroll';
import { getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';
import { mapMutations, mapGetters } from 'vuex';

export default {
    data() {
        return {
            userInfo: {},
            actived: false,
        };
    },
    mounted() {
        this.$refs.mindexheader.style.height = (parseInt(this.statusbar)) + 'px';
        this.$refs.indexwrapper.style.top = (parseInt(this.statusbar)) + 'px';
        setTimeout(() => {
            this._initScroll();
        }, 20);
    },
    activated() {
        if (this.actived === false) {
            this._getUserLoginInfo();
        }
    },
    methods: {
        // 获取用户基本信息
        _getUserLoginInfo() {
            const userLoginAddress = '/user/info';
            console.log(this.getToken);
            if (this.getToken === '' || this.getToken === null) {
                console.log('token == dd');
                this.userLogout();
            } else {
                getCommonInfoHasData(userLoginAddress, { token: this.getToken }).then((res) => {
                    console.log(res);
                    if (!res.status_code) {
                        this.actived = true;
                        this.userInfo = res.data;
                        this.userLoginState();
                        this.setusername(res.data.username);
                        this.setnickname(res.data.nickname);
                        this.setage(res.data.age);
                        this.setmobile(res.data.mobile);
                        this.setavatar(res.data.avatar);
                        this.setsex(res.data.sex);
                    } else {
                        this.userLogout();
                    }
                });
            }
        },
        goLogin() {
            this.$router.push({
                path: '/login',
            });
        },
        goConfigPage() {
            this.$router.push({
                path: '/mine/config',
            });
        },
        //  签到
        sigin() {
            const siginAdd = '/task/signin';
            getCommonInfoHasData(siginAdd, {
                token: this.getToken,
            }).then((res) => {
                this.showTips(res.message);
            });
        },
        _initScroll() {
            if (!this.$refs.mgBox) {
                return;
            }
            this.scroll = new BSscroll(this.$refs.mgBox, {
                click: this.click,
                momentum: true,
                bounce: true,
                scrollX: true,
            });
        },
        showTips(content) {
            plus.nativeUI.toast(content);
        },
        ...mapMutations([
            'userLoginState',
            'userLogout',
            'setusername',
            'setnickname',
            'setage',
            'setmobile',
            'setavatar',
            'setsex',
        ]),
    },
    computed: {
        ...mapGetters(['getLoginState', 'getToken', 'avatar', 'statusbar']),
    },
    components: {
        Scroll,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.mine-index {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 50px;
    background: $color-background;

    .indexwrapper {
        position: absolute;
        width: 100%;
        top: 24px;
        bottom: 0;

        .mine-wrapper {
            height: 100%;
            overflow: hidden;

            .m-top {
                box-shadow: 0 2px 5px #d1d0d0;
                background: #ffffff;

                .logobox {
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    position: relative;
                    width: 100%;
                    height: 100px;
                    padding: 0 15px;
                    bg-image('tu');
                    background-size: 100% 100px;

                    .avatar {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 74px;
                        width: 74px;
                        box-sizing: border-box;
                        border: 2px solid #ffffff;
                        border-radius: 50%;
                        overflow: hidden;

                        &.default {
                            background: #eeeeee;

                            .avatar-img {
                                width: 48px;
                                height: 70px;
                                bg-image('avatar');
                                background-size: 100% 100%;
                            }
                        }

                        &.active {
                            background: #cce198;

                            .avatar-img {
                                width: 48px;
                                height: 70px;
                                bg-image('avatar-active');
                                background-size: 100% 100%;
                            }
                        }

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .login-n {
                        margin-left: 15px;
                        color: #222222;
                    }

                    .login-y {
                        height: 74px;
                        width: 80%;
                        font-size: $font-size-small-s;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        padding: 4px 15px;
                        box-sizing: border-box;

                        .name {
                            color: #ffa800;
                            font-size: $font-size-medium-x;
                        }

                        .score {
                            display: flex;
                            position: relative;

                            .score-title {
                                display: flex;
                                width: 43px;
                                justify-content: space-between;
                            }

                            .sign {
                                position: absolute;
                                left: 100px;
                                top: -5px;
                                height: 20px;
                                width: 50px;
                                border: 1px solid #b2780c;
                                color: #ffffff;
                                background: #fcb537;
                                background: linear-gradient(#f2e66c, #fcb537);
                                box-sizing: border-box;
                                text-align: center;
                                line-height: 19px;
                                border-radius: 10px;
                                font-size: $font-size-small-s;
                            }
                        }

                        .vip {
                            display: flex;
                            position: relative;

                            .levelup {
                                position: absolute;
                                left: 100px;
                            }
                        }
                    }

                    .config {
                        position: absolute;
                        right: 15px;
                        top: 20px;
                        width: 17px;
                        height: 16px;
                        bg-image('config');
                        background-size: 17px 16px;
                    }
                }

                .gamebox {
                    padding: 0 15px;

                    .mygame-title {
                        width: 100%;
                        height: 44px;
                        padding: 0 15px;
                        display: flex;
                        align-items: center;
                        color: #000000;

                        .mg-icon {
                            display: block;
                            width: 20px;
                            height: 20px;
                            bg-image('mygame');
                            background-size: 20px 20px;
                            margin-right: 10px;
                        }
                    }

                    .mg-box {
                        width: 100%;
                        height: 80px;
                        overflow: hidden;
                        padding: 10px 0;
                        box-sizing: border-box;
                        border-top: 1px solid #eeeeee;

                        .mg-box-wrapper {
                            height: 100%;
                            min-width: 100%;
                            display: flex;
                            width: 840px;

                            img {
                                display: block;
                                width: 60px;
                                height: 60px;
                                margin-right: 11px;
                            }
                        }
                    }
                }
            }

            .mine {
                width: 100%;
                background: #ffffff;
                min-height: 300px;
                margin-top: 15px;

                .m-item {
                    height: 60px;
                    border-bottom: 1px solid #eeeeee;
                    display: flex;
                    align-items: center;
                    padding: 0 15px;

                    span {
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-size: 20px 20px;
                        margin-right: 10px;

                        &.gift {
                            bg-image('gift');
                        }

                        &.message {
                            bg-image('message');
                        }

                        &.score {
                            bg-image('score');
                        }

                        &.accountsafe {
                            bg-image('accountsafe');
                        }

                        &.focus {
                            bg-image('focus');
                        }

                        &.vip {
                            bg-image('vip');
                        }

                        &.service {
                            bg-image('service');
                        }
                    }
                }
            }
        }
    }
}
</style>
